//flex 布局和 子元素 对其方式
@mixin fj($type: space-between){
    display: flex;
    justify-content: $type;
  }

  $red: #F63515;

  @font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1583298147028'); /* IE9 */
    src: url('iconfont.eot?t=1583298147028#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
    url('iconfont.woff?t=1583298147028') format('woff'),
    url('iconfont.ttf?t=1583298147028') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1583298147028#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-icon-test6:before {
    content: "\e61b";
  }
  
  .icon-jiangxu:before {
    content: "\e6a1";
  }
  
  .icon-shengxu:before {
    content: "\e6a2";
  }
  
  .icon-shaixuan:before {
    content: "\e660";
  }
  
  .icon-caidan:before {
    content: "\e790";
  }
  
  .icon-yonghu:before {
    content: "\e638";
  }
  
  .icon-gengduo:before {
    content: "\e625";
  }
  
  .icon-sousuo:before {
    content: "\e61c";
  }
  
  .icon-fanhui:before {
    content: "\e615";
  }
  
  .icon-icon-test:before {
    content: "\e635";
  }
  
  .icon-icon-test1:before {
    content: "\e637";
  }
  
  .icon-icon-test2:before {
    content: "\e63b";
  }
  
  .icon-icon-test3:before {
    content: "\e64f";
  }
  
  .icon-icon-test4:before {
    content: "\e657";
  }
  
  .icon-icon-test5:before {
    content: "\e658";
  }
    

.product-detail {
    width: 100%;
    .text-block {
        display: block;
    }
    .nav-list {
        display: flex;
        justify-content: center;
        align-items: center;

        text.iconfont {
            font-size: 50rpx;
            color: #000;
        }

        &>view {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10rpx;
            font-size: 28rpx;
            color: #fff;
            &.active {
                color: skyblue;
            }

            .iconfont {
                padding-right: 8rpx;
                font-size: 28rpx;
                color: skyblue;
            }
        }
    }

    .slider image,
    swiper,
    swiper-item {
        width: 100%;
        height: 700rpx;
    }
    .detail-info {
        width: 100%;
        padding: 20rpx 30rpx;
        font-size: 30rpx;
        box-sizing: border-box;
    
        .detail-info-name {
            font-size: 40rpx;
            color: #333;
        }
    
        .detail-info-subtitle {
            padding: 10rpx 0;
            font-size: 28rpx;
            color: #999;
        }
    
        view {
            @include fj;
            height: 70rpx;
            line-height: 80rpx;
            padding: 10rpx 0;
            font-size: 32rpx;
            color: #999;
    
            .detail-info-price {
                color: $red;
                font-size: 44rpx;
            }
        }
    }

    .detail-content {
        width: 100%;
    
        .detail-gap {
            width: 100%;
            height: 20rpx;
            background: #eee;
        }
    
        .ul {
            @include fj;
            width: 100%;
            margin: 20rpx 0;
    
            .li {
                flex: 1;
                padding: 10rpx 0;
                text-align: center;
                font-size: 30rpx;
                border-right: 1rpx solid #999;
                box-sizing: border-box;
    
                &:last-child {
                    border-right: none;
                }
            }
        }
    
        view {
            width: 100%;
            overflow: hidden;
    
            p {
                width: 100%;
                font-size: 40rpx;
                text-align: center;
            }
    
            image {
                width: 100%;
                height: 796rpx;
            }
        }
    }
}